<script setup>
import { ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
//轮播图url及标题
const pictureList = [
  {
    img: '/picture1.avif',
    title: '投稿安逸动画，赢现金好礼'
  },
  {
    img: '/picture2.avif',
    title: '欢迎进入幻想世界'
  }
]
//组件引用
const carouselRef = ref(null)
// 切换图片
const prev = () => carouselRef.value?.prev()
const next = () => carouselRef.value?.next()
</script>
<template>
  <!-- 轮播图组件 -->
  <div class="carousel-card">
    <el-carousel
      indicator-position="none"
      arrow="never"
      :autoplay="true"
      ref="carouselRef"
    >
      <el-carousel-item v-for="(item, idx) in pictureList" :key="item.title" class="carousel-item">
        <!-- 图片 动态绑定url-->
        <div class="carousel-img" :style="{ backgroundImage: `url(${item.img})` }"></div>
        <!-- 标题 -->
        <div class="carousel-title">{{ item.title }}</div>
        <!-- 指示器 -->
        <div class="carousel-indicators">
          <span
            v-for="(b, i) in pictureList"
            :key="i"
            :class="['dot', { active: idx === i }]"
          ></span>
        </div>
        <!-- 切换按钮 -->
        <div class="carousel-arrows">
          <el-button
            circle
            size="small"
            @click.stop="prev"
            class="arrow-btn"
            :icon="ArrowLeft"
          />
          <el-button
            circle
            size="small"
            @click.stop="next"
            class="arrow-btn"
            :icon="ArrowRight"
          />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>



<style scoped>

.carousel-card{
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); */
  position: relative;
  width: 100%;
  min-width: 450px;
  max-width: 800px;
  height: 100%;
  /* border: 1px solid green; */
}
.el-carousel {
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* border: 1px solid  */
}
.carousel-item{
  height: 430px;
  width: 100%;
  border: 1px solid #ccc;
  
}
.carousel-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  /* border: 1px solid red; */
}
.carousel-title {
  position: absolute;
  left: 18px;
  bottom: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2;
}
.carousel-indicators {
  position: absolute;
  left: 18px;
  bottom: 30px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff6;
  /* transition: background 0.2s; */
}
.dot.active {
  background: #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;

}
.carousel-arrows {
  position: absolute;
  right: 18px;
  bottom: 30px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.arrow-btn {
  background: rgba(255,255,255,0.7);
  color: #888;
  border: none;
  box-shadow: none;
}
.arrow-btn:hover {
  background: #fff;
  color: #00a1d6;
}
</style>